<template>
    <div class="brokerage-JournalAccount">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "佣金"},{"name": "佣金明细", "url": ""}]'></tz-breadcrumb>
      <!-- 搜索表单 -->
      <el-form :inline="true" :model="formInline" class="form" label-position="left" label-width="90px" @submit.native.prevent="onSubmit" >

        <el-row :gutter="0">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div>
              <!-- 服务商名称 -->
              <el-form-item class="form-item">
                <el-input class="time" v-model="formInline.name" placeholder="用户名称"></el-input>
              </el-form-item>
              <!-- 服务商电话 -->
              <el-form-item class="form-item">
                <el-input class="time" v-model="formInline.phone" placeholder="用户电话"></el-input>
              </el-form-item>
              <!-- 订单编号 -->
              <el-form-item class="form-item">
                <el-input class="time" v-model="formInline.order_id" placeholder="订单编号"></el-input>
              </el-form-item>
              <!-- 进出类型 -->
              <el-form-item class="form-item">
                <el-select v-model="formInline.fina_type" placeholder="进出类型">
                  <el-option
                          v-for="item in fina_type"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 资金类型 -->
              <el-form-item class="form-item" >
                <el-select v-model="formInline.cash_type" placeholder="资金类型">
                  <el-option
                          v-for="item in cash_type"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 时间 -->
              <el-form-item class="form-item" label="时间">
                <el-date-picker v-model="time" :default-time="[time[0], time[1]]" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='timeChange'></el-date-picker>
              </el-form-item>

              <el-form-item  class="form-item">
                <el-col native-type='submit' :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
                  <el-button type="primary" size='medium' native-type='submit'>搜索</el-button>
                </el-col>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索结果 -->
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="" label="编号">
          <template slot-scope="scope">
            <span>{{ scope.row.fina_id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="订单号">
          <template slot-scope="scope">
            <span>{{ scope.row.order_id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="用户ID">
          <template slot-scope="scope">
            <span>{{ scope.row.uid }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="进出类型">
          <template slot-scope="scope">
            <!--<el-tag type="{{ scope.row.fina_type | finaTypeTag }}">-->
              <span>
                <el-tag type="success" v-if="scope.row.fina_type === 'in'">{{ scope.row.fina_type | finaType }}</el-tag>
                <el-tag type="warning" v-if="scope.row.fina_type === 'out'">{{ scope.row.fina_type | finaType }}</el-tag>
              </span>
            <!--</el-tag>-->
          </template>
        </el-table-column>
        <el-table-column prop="" label="资金类型">
          <template slot-scope="scope">
            <span>{{ scope.row.cash_type }}</span>
          </template>
        </el-table-column>
<!--         <el-table-column prop="" label="端口">
          <template slot-scope="scope">
            <span>{{ scope.row.fina_source }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="详情">
          <template slot-scope="scope">
            <span>{{ scope.row.fina_action }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="" label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
               <el-table-column prop="" label="交易金额">
          <template slot-scope="scope">
            <span>{{ scope.row.fina_cash }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="当前余额">
          <template slot-scope="scope">
            <span>{{ scope.row.user_balance }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="">
          <template>
            <!--<el-button type="primary">详情</el-button>-->
            <el-button type="primary" @click="journalDetails( props.row.fina_id )">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="total > formInline.limit" class="text-center pager" @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"></el-pagination>
    </div>
</template>

<script>
import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import api from './../../api/api';
import http from './../../config/index';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data () {
    return {
      // 表单数据
      formInline: {
        name: '',
        phone: '',
        order_id: '',
        fina_type: '',
        cash_type: '',
        start_time: '',
        end_time: '',
        page: 1,
        limit: 10
      },
      fina_type: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 'in',
          label: '收入'
        },
        {
          value: 'out',
          label: '支出'
        }
      ],
      cash_type: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '支付返佣',
          label: '支付返佣'
        }
      ],
      time: [msToDate(new Date()).slice(0, 10) + ' 00:00:00', msToDate(new Date()).slice(0, 10) + ' 23:59:59'],
      orderType: [{
        value: '支付宝商家'
      },
      {
        value: '微信商家'
      },
      {
        value: '其他'
      }],
      tableData: [],
      total: 0,
      // 是否加载
      loading: false
    };
  },
  filters: {
    finaType (val) {
      let result = val === 'in' ? '收入' : '支出';
      return result;
    },
    finaTypeTag (val) {
      let result = val === 'in' ? 'success' : 'warning';
      return result;
    }
  },
  methods: {
    timeChange (val) {
      // 日期空间确定时触发
      this.formInline.start_time = msToDate(val[0]);
      this.formInline.end_time = msToDate(val[1]);
      console.log(this.formInline.start_time);
    },
    // 提交搜索
    onSubmit: function () {
      let that = this;
      that.formInline.page = 1;
      that.requestData();
      console.log(that.time);
    },
    handleCurrentChange (val) {
      this.formInline.page = val;
      this.requestData();
    },
    // 提现详情
    withdrawDetails (id) {
      console.log(id);
      // this.$router.push({
      //   path: '/WithdrawDetails',
      //   query: {
      //     id: id
      //   }
      // });
    },
    requestData () {
      let that = this;
      console.log(that.time);
      that.loading = true;
      http.post(api.JournalAccount, {
        token: localStorage.getItem('token'),
        name: that.formInline.name,
        uid: that.formInline.uid,
        phone: that.formInline.phone,
        order_id: that.formInline.order_id,
        start_time: that.formInline.start_time,
        end_time: that.formInline.end_time,
        fina_type: that.formInline.fina_type,
        cash_type: that.formInline.cash_type,
        page: that.formInline.page,
        limit: that.formInline.limit
      }, response => {
        that.loading = false;
        if (response.code === 10001 || response.code === '10001') {
          that.tableData = response.data[0].result.data;
          that.total = response.data[0].result.total;
        } else {
          that.tableData = [];
          that.total = 0;
        }
      }, err => {
        that.loading = false;
        console.log(err);
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem
  padding-bottom: 0
  margin-top: 15px
  margin-bottom: 12px
  box-sizing: border-box
  background: #fff
  box-shadow: 1px 1px 1px #999
  .form-item
    display: inline-block
    margin-right: 35px
    margin-bottom: 0
    padding-bottom: 2rem
    .time
      width: 200px
.pay-number
  color: #ff4400
  margin-left: 5px
</style>
